<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />'); // Loading image
 
if(first.length>0&& last.length>0)
{
 
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
 
});
 
// Edit input box click action
$(".editbox").mouseup(function()
{
return false
});
 
// Outside click action
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
 
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:5px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
//Table Records
<table>
<?php
include('db.php');
$sql=mysql_query("select * from book");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$td=$row['tieude'];
$tg=$row['tacgia'];
$gia=$row['gia'];
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
 
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $td; ?></span>
<input type="text" value="<?php echo $td?>" class="editbox" id="first_input_<?php echo $id; ?>" /&gt;
</td>
 
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $tg; ?></span>
<input type="text" value="<?php echo $tg; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
 
</tr>
<?php
}
?>
</table>
</body>
</html>
